<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>EaselJS Example: Using Stage.autoClear</title>

	<link href="assets/demoStyles.css" rel="stylesheet" type="text/css" />

	<!-- Note: All core EaselJS classes are listed here: -->
	<script type="text/javascript" src="../src/createjs/events/Event.js"></script>
	<script type="text/javascript" src="../src/createjs/events/EventDispatcher.js"></script>
	<script type="text/javascript" src="../src/createjs/utils/IndexOf.js"></script>
	<script type="text/javascript" src="../src/easeljs/utils/UID.js"></script>
	<script type="text/javascript" src="../src/easeljs/utils/Ticker.js"></script>
	<script type="text/javascript" src="../src/easeljs/geom/Matrix2D.js"></script>
	<script type="text/javascript" src="../src/easeljs/geom/Point.js"></script>
	<script type="text/javascript" src="../src/easeljs/geom/Rectangle.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Shadow.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/SpriteSheet.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Graphics.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/DisplayObject.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Container.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Stage.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Bitmap.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Sprite.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/BitmapAnimation.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/BitmapText.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Shape.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Text.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/DOMElement.js"></script>
	<script type="text/javascript" src="../src/easeljs/events/MouseEvent.js"></script>
	<script type="text/javascript" src="../src/easeljs/filters/Filter.js"></script>
	<script type="text/javascript" src="../src/easeljs/ui/ButtonHelper.js"></script>
	<script type="text/javascript" src="../src/easeljs/ui/Touch.js"></script>
	<script type="text/javascript" src="../src/easeljs/utils/SpriteSheetUtils.js"></script>
	<script type="text/javascript" src="../src/easeljs/utils/SpriteSheetBuilder.js"></script>

	<!-- We also provide hosted minified versions of all CreateJS libraries.
	  http://code.createjs.com -->

	<script>
	var canvas;
	var stage;
	var starfield
	var moon;
	var sky;

	function init() {
		if (window.top != window) {
			document.getElementById("header").style.display = "none";
		}
		// create a new stage and point it at our canvas:
		canvas = document.getElementById("testCanvas");
		stage = new createjs.Stage(canvas);

		// draw the sky:
		sky = new createjs.Shape();
		sky.graphics.beginLinearGradientFill(["#204","#003","#000"], [0,0.15,0.6], 0, canvas.height, 0, 0);
		sky.graphics.drawRect(0, 0, canvas.width, canvas.height);
		stage.addChild(sky);

		// create a Shape instance to draw the vectors stars in, and add it to the stage:
		starfield = new createjs.Shape();
		stage.addChild(starfield);

		// set up the cache for the star field shape, and make it the same size as the canvas:
		starfield.cache(0,0,canvas.width,canvas.height);

		// draw the moon in a separate shape, so it isn't part of the generative caching:
		moon = new createjs.Shape();
		moon.graphics.beginFill("#CCF").drawCircle(0,0,60);
		moon.graphics.beginFill("#000").drawEllipse(-35,-57,96,114);
		moon.rotation = -30;
		stage.addChild(moon);

		// start the tick and point it at the window so we can do some work before updating the stage:
		createjs.Ticker.addEventListener("tick", tick);
		createjs.Ticker.setFPS(30);
	}

	function stop() {
		createjs.Ticker.removeEventListener("tick", tick);
	}

	function tick(event) {
		// draw a vector star at a random location:
		starfield.graphics.beginFill(createjs.Graphics.getRGB(0xFFFFFF,Math.random())).drawPolyStar(Math.random()*canvas.width, Math.random()*canvas.height, Math.random()*4+1, 5, 0.93, Math.random()*360);

		// draw the new vector onto the existing cache, compositing it with the "source-overlay" composite operation:
		starfield.updateCache("source-overlay");

		// if you omit the compositeOperation param in updateCache, it will clear the existing cache, and draw into it:
		// in this demo, that has the effect of showing just the star that was drawn each tick.
		// shape.updateCache();

		// because the vector star has already been drawn to the cache, we can clear it right away:
		starfield.graphics.clear();

		// darken the sky:
		sky.alpha -= 0.0005;

		// move the moon across the sky:
		var w = canvas.width+200;
		moon.x = (moon.x+100+1+w)%w-100;
		moon.y = 250-Math.sin(moon.x/w*Math.PI)*150;

		// draw the updates to stage:
		stage.update(event);
	}

	</script>
</head>
	
<body onload="init();">

	<header id="header" class="EaselJS">
	    <h1><span class="text-product">Easel<strong>JS</strong></span> Update Cache</h1>
	    <p>This example draws a single vector star each tick, then composites it onto an existing cache using <strong>DisplayObject.updateCache();</strong> to avoid the cost of rendering the vectors each frame.
	    	This provides a similar result as setting <strong>stage.autoclear</strong> to false, but can be managed on a per instance basis.
	    </p>
	</header>

	<!-- background isn't set to black to demonstrate how the darkening applies -->
	<div class="canvasHolder">
		<canvas id="testCanvas" width="960" height="400" style="background-color:#000"></canvas>
	</div>
</body>
</html>
